<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加密解密</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css">
    <style type="text/css">
        .clear{clear: both;}
        textarea{resize: none;}
        .div_btn{height: 100px;line-height: 100px}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-title">
                <h3>加密解密</h3>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据加/解密</h5>
                </div>
                <div class="ibox-content">
                    <div class="col-sm-4">
                        <textarea id="enc_str1" rows="5" class="form-control" placeholder="要加密的数据"></textarea>
                    </div>
                    <div class="col-sm-4">
                        <textarea id="dec_str1" rows="5" class="form-control" placeholder="要解密的数据"></textarea>
                    </div>
                    <div class="col-sm-4 div_btn">
                        <input type="button" value="加密" class="btn btn-success" id="enc_btn1">
                        <input type="button" value="解密" class="btn btn-primary" id="dec_btn1">
                        <input type="button" value="清空" class="btn btn-default" id="clear1">
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>JS加/解密</h5>
                </div>
                <div class="ibox-content">
                    <div class="col-sm-4">
                        <textarea id="enc_str2" rows="5" class="form-control" placeholder="要加密的数据"></textarea>
                    </div>
                    <div class="col-sm-4">
                        <textarea id="dec_str2" rows="5" class="form-control" placeholder="要解密的数据"></textarea>
                    </div>
                    <div class="col-sm-4 div_btn">
                        <input type="button" value="加密" class="btn btn-success" id="enc_btn2">
                        <input type="button" value="解密" class="btn btn-primary" id="dec_btn2">
                        <input type="button" value="清空" class="btn btn-default" id="clear2">
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据加/解密(高级)</h5>
                </div>
                <div class="ibox-content">
                    <div class="col-sm-4">
                        <textarea id="enc_str4" rows="5" class="form-control" placeholder="要加密的数据"></textarea>
                    </div>
                    <div class="col-sm-4">
                        <textarea id="dec_str4" rows="5" class="form-control" placeholder="要解密的数据"></textarea>
                    </div>
                    <div class="col-sm-4 div_btn">
                        <input type="button" value="加密" class="btn btn-success" id="enc_btn4">
                        <input type="button" value="解密" class="btn btn-primary" id="dec_btn4">
                        <input type="button" value="清空" class="btn btn-default" id="clear4">
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>JS加/解密(高级)</h5>
                </div>
                <div class="ibox-content">
                    <div class="col-sm-4">
                        <textarea id="enc_str3" rows="5" class="form-control" placeholder="要加密的数据"></textarea>
                    </div>
                    <div class="col-sm-4">
                        <textarea id="dec_str3" rows="5" class="form-control" placeholder="要解密的数据"></textarea>
                    </div>
                    <div class="col-sm-4 div_btn">
                        <input type="button" value="加密" class="btn btn-success" id="enc_btn3">
                        <input type="button" value="解密" class="btn btn-primary" id="dec_btn3">
                        <input type="button" value="清空" class="btn btn-default" id="clear3">
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/layer/layer.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/cryptojs/cryptojs-aes.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/cryptojs/cryptojs-aes-format.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/cryptojs/cryptojs-aes-format2.js?v={php}echo time(){/php}"></script>
<script type="text/javascript">
    $(function () {
        // 数据加密
        $('#enc_btn1').click(function () {
            let $str = $('#enc_str1')
            if ($str.val() === '') {
                layer.msg('要加密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/crypto/encrypt2',
                data: {'str': $str.val()},
                success: function ($data) {
                    console.log($data)
                    if ($data.code === 200) {
                        $('#dec_str1').val($data.data)
                    }
                }
            })
        })
        // 数据解密
        $('#dec_btn1').click(function () {
            let $str = $('#dec_str1')
            if ($str.val() === '') {
                layer.msg('要解密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/crypto/decrypt2',
                data: {'str': $str.val()},
                success: function ($data) {
                    console.log($data)
                    if ($data.code === 200) {
                        $('#enc_str1').val($data.data)
                    } else {
                        layer.msg($data.message, {icon: 2, time: 1000})
                    }
                }
            })
        })
        // 数据清空
        $('#clear1').click(function () {
            $('#enc_str1').val('')
            $('#dec_str1').val('')
        })

        // 数据加密(高级)
        $('#enc_btn4').click(function () {
            let $str = $('#enc_str4')
            if ($str.val() === '') {
                layer.msg('要加密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/crypto/encrypt',
                data: {'str': $str.val()},
                success: function ($data) {
                    console.log($data)
                    if ($data.code === 200) {
                        $('#dec_str4').val($data.data)
                    }
                }
            })
        })
        // 数据解密(高级)
        $('#dec_btn4').click(function () {
            let $str = $('#dec_str4')
            if ($str.val() === '') {
                layer.msg('要解密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/crypto/decrypt',
                data: {'str': $str.val()},
                success: function ($data) {
                    console.log($data)
                    if ($data.code === 200) {
                        $('#enc_str4').val($data.data)
                    } else {
                        layer.msg($data.message, {icon: 2, time: 1000})
                    }
                }
            })
        })
        // 数据清空(高级)
        $('#clear4').click(function () {
            $('#enc_str4').val('')
            $('#dec_str4').val('')
        })

        // JS数据加密
        $('#enc_btn2').click(function () {
            let $str = $('#enc_str2')
            if ($str.val() === '') {
                layer.msg('要加密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            let $salt = '{$salt}', $iv = '{$iv}'
            let $res = CryptoJSAesJsonT.encrypt($str.val(), $salt, $iv)
            $('#dec_str2').val($res)
        })
        // JS数据解密
        $('#dec_btn2').click(function () {
            let $str = $('#dec_str2')
            if ($str.val() === '') {
                layer.msg('要解密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            let $salt = '{$salt}', $iv = '{$iv}'
            let $res = CryptoJSAesJsonT.decrypt($str.val(), $salt, $iv)
            $('#enc_str2').val($res)
        })
        // JS数据清空
        $('#clear2').click(function () {
            $('#enc_str2').val('')
            $('#dec_str2').val('')
        })

        // JS数据加密(高级)
        $('#enc_btn3').click(function () {
            let $str = $('#enc_str3')
            if ($str.val() === '') {
                layer.msg('要加密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            let $pwd = '{$pwd}'
            let $res = CryptoJSAesJson.encrypt($str.val(), $pwd)
            $('#dec_str3').val($res)
        })
        // JS数据解密(高级)
        $('#dec_btn3').click(function () {
            let $str = $('#dec_str3')
            if ($str.val() === '') {
                layer.msg('要解密的数据不能为空', {icon: 5, time: 1000}, function () {
                    $str.focus()
                })
                return false
            }
            let $pwd = '{$pwd}'
            let $res = CryptoJSAesJson.decrypt($str.val(), $pwd)
            $('#enc_str3').val($res)
        })
        // JS数据清空(高级)
        $('#clear3').click(function () {
            $('#enc_str3').val('')
            $('#dec_str3').val('')
        })
    })
</script>
</html>
